<template>
  <div class="container">
      <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="54px">
        <x-header :left-options="{showBack: false}" class="my-header" title="护士上门" ></x-header>
        <div class="service_item">
          <flexbox :gutter="0" v-for="(item,index) in servicelist">
            <flexbox-item><router-link :to="{path:'/order_details',query:item}"><div class="flex-demo">
              <span class="icon" :class="item.icon"></span>
              <h4 class="item_title">{{item.name}}</h4>
              <div class="item_des">{{item.description}}</div>
            </div></router-link></flexbox-item>
          </flexbox>
        </div>
        <divider>没有更多内容了</divider>
        <tabbar slot="bottom" id="tabbar">
          <tabbar-item :link="{path:'/',replace:true}" >
            <img slot="icon" src="../../assets/home@3x.png">
            <span slot="label">主页</span>
          </tabbar-item>
          <tabbar-item :link="{path:'/service_item',replace:true}" selected>
            <img slot="icon" src="../../assets/nurse@3x.png">
            <span slot="label">护士上门</span>
          </tabbar-item>
          <tabbar-item :link="{path:'/user_center',replace:true}">
            <img slot="icon" src="../../assets/me_def@3x.png">
            <span slot="label">个人中心</span>
          </tabbar-item>
        </tabbar>
      </view-box>
  </div>
</template>

<script>
  import {Flexbox, FlexboxItem, GroupTitle, XButton, Divider,XHeader, Tabbar, TabbarItem, ViewBox, Drawer } from 'vux'
  export default {
    data() {
      return {
        title:'',
        showMenu: false,
        servicelist:[]
      }
    },
    mounted(){
      this.initdata()
    },
    methods:{
      initdata(){
        let data={
          index:0,
          count:20
        }
        let self=this
        this.Ajax('post','/Mall/ServiceList/serviceAll',data,function(data){
          console.log(data)
            data=data.dataList
          let list=[5]
          data.forEach((item)=>{
            if(item.name=='肌肉注射'){
              item.icon="visit_1"
              item.description="上门注射黄体酮、排卵针等药物"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[0]=item;
            }else if(item.name=='静脉输液'){
              item.icon="visit_2"
              item.description="专业护士上门提供营养液、氨基酸等药物输液"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[2].sid
              item.comp_normalSid=item.serviceList[1].sid
              item.comp_highSid=item.serviceList[3].sid
              list[1]=item
            }else if(item.name=='康复护理'){
              item.description="指导和协助进行功能锻炼、肢体康复按摩等"
              item.icon="visit_3"
              item.normalSid=item.serviceList[0].sid
              list[2]=item
            }else if(item.name=='护士陪诊'){
              item.description="指导和协助患者（骨折/卧床）进行功能锻炼、肢体康复按摩"
              item.icon="visit_4"
              item.normalSid=item.serviceList[0].sid
              list[3]=item
            }else if(item.name=='皮下注射'){
              item.description="上门注射胸腺肽、HPV疫苗等药物"
              item.icon="visit_5"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[4]=item
            }else if(item.name=='输美白针'){
              item.description="专业护士上门提供各类美白针输注"
              item.icon="visit_6"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[2].sid
              item.comp_normalSid=item.serviceList[1].sid
              item.comp_highSid=item.serviceList[3].sid
              list[5]=item
            }else if(item.name=='PICC换药护理'){
                item.description="长期留置PICC的管道维护"
              item.icon="visit_7"
              item.normalSid=item.serviceList[0].sid
              list[6]=item
            }else if(item.name=='静脉采血'){
                item.description="常规产检、体检或特殊检查的上门采血"
              item.icon="visit_8"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[7]=item
            }else if(item.name=='尿管护理'){
                item.description="拔尿管、插尿管、更换尿袋"
              item.icon="visit_9"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[8]=item
            }else if(item.name=='会阴护理'){
                item.description="为产妇及长期卧床患者作会阴部的清洁"
              item.icon="visit_10"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[9]=item
            }else if (item.name=="胃管护理"){
                item.description="更换胃管、鼻腔输入营养液及药物指导"
              item.icon="visit_11"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[10]=item
            }else if(item.name=='鼻饲与指导'){
                item.description="鼻饲与指导"
              item.icon="visit_12"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[11]=item
            }else if(item.name=="气管切开护理"){
                item.description="气管切开的敷料更换、皮肤消毒"
              item.icon="visit_13"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[12]=item
            }else if(item.name=="口腔护理"){
                item.description="为卧床、插管患者清洁口腔"
              item.icon="visit_14"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[13]=item
            }else if(item.name=="外科伤口换药"){
                item.description="外科伤口额常规评估、检查、消毒、换药"
              item.icon="visit_15"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[14]=item
            }else if(item.name=="外科伤口拆线"){
                item.description="外科伤口的拆线护理，促进伤口的愈合恢复"
              item.icon="visit_16"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[15]=item
            }else if(item.name=="压疮换药护理"){
                item.description="压疮分级评估、换药护理"
              item.icon="visit_17"
              list[16]=item
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
            }
          })
          self.servicelist=list
        })
      },
      listenTitle:function(data){
        this.title=data
      }
    },
    components: {
      XHeader,
      Tabbar,
      TabbarItem,
      ViewBox,
      Drawer,
      Divider,
      Flexbox, FlexboxItem, GroupTitle
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  lang="stylus" rel="stylesheet/stylus">
  .my-header {
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: rgb(255, 104, 140)
  }
  .services{
    height: 70px;
    background-color: white;
  }
  .flex-demo{
    height: 70px;
    margin: 0 0 5px 0px;
    background-color: white;
  }
  .icon
    display: inline-block;
    float left
    margin: 10px 5px 15px 20px;
    width: 50px;
    height: 50px;
    background-size: 45px 45px;
    background-repeat: no-repeat;
    &.visit_1
      background-image url('icons/visit/visit_1.imageset/visit_1.png')
    &.visit_2
      background-image url('icons/visit/visit_2.imageset/visit_2.png')
    &.visit_3
      background-image url('icons/visit/visit_3.imageset/visit_3.png')
    &.visit_4
      background-image url('icons/visit/visit_4.imageset/visit_4.png')
    &.visit_5
      background-image url('icons/visit/visit_5.imageset/visit_5.png')
    &.visit_6
      background-image url('icons/visit/visit_6.imageset/visit_6.png')
    &.visit_7
      background-image url('icons/visit/visit_7.imageset/visit_7.png')
    &.visit_8
      background-image url('icons/visit/visit_8.imageset/visit_8.png')
    &.visit_9
      background-image url('icons/visit/visit_9.imageset/visit_9.png')
    &.visit_10
      background-image url('icons/visit/visit_10.imageset/visit_10.png')
    &.visit_11
      background-image url('icons/visit/visit_11.imageset/visit_11.png')
    &.visit_12
      background-image url('icons/visit/visit_12.imageset/visit_12.png')
    &.visit_13
      background-image url('icons/visit/visit_13.imageset/visit_13.png')
    &.visit_14
      background-image url('icons/visit/visit_14.imageset/visit_14.png')
    &.visit_15
      background-image url('icons/visit/visit_15.imageset/visit_15.png')
    &.visit_16
      background-image url('icons/visit/visit_16.imageset/visit_16.png')
    &.visit_17
      background-image url('icons/visit/visit_17.imageset/visit_17.png')
    &.visit_18
      background-image url('icons/visit/visit_18.imageset/visit_18.png')
  .item_title {
    display inline-block
    margin 10px 0 5px 0
    color black
    font-weight bold
  }
  .item_des {
    color gray
    font-size 12px
  }
  #tabbar{
    position: fixed
  }
</style>
